<template>
  <div
    class="container-body search-body"
    :style="{ width: proxy.globalInfo.bodyWidth + 'px' }"
  >
    <div
      class="search-panel"
      :style="{ 'padding-top': startSearch ? '0px' : '100px' }"
    >
      <el-form
        :model="formData"
        :rules="rules"
        ref="formDataRef"
        @submit.prevent
      >
        <!--input输入-->
        <el-form-item prop="keyword">
          <el-input
            clearable
            placeholder="请输入你想要查找的关键词"
            v-model="formData.keyword"
            @keyup.enter="search"
            @focus="startSearchHandler"
            @change="changeInput"
            @blur="endSearchHandler"
          >
            <template #suffix>
              <span
                class="iconfont icon-search"
                @click="search"
                @blur="formData.keyword = $event.target.value()"
              ></span>
            </template>
          </el-input>
        </el-form-item>
      </el-form>
    </div>
    <div class="article">
      <DataList
        noDataMsg="暂无数据, 快去发布吧~"
        :loading="loading"
        :dataSource="articleListInfo"
        @loadData="search"
      >
        <template #default="{ data }">
          <ArticleListItem
            :showComment="showComment"
            :data="data"
            :htmlTitle="true"
          ></ArticleListItem>
        </template>
      </DataList>
    </div>
  </div>
</template>

<script setup>
import ArticleListItem from '@/views/forum/ArticleListItem.vue'
import { ref, getCurrentInstance, watch } from 'vue';
import { useStore } from 'vuex';
const { proxy } = getCurrentInstance();
const formData = ref({});
const formDataRef = ref();
const store = useStore();
const rules = {
  keyword: [{ required: true, message: "请输入内容" },
  { min: 3, message: '最少输入3个字符' }
  ],
};
const api = {
  search: '/forum/search',
}

// 开始搜索 搜索框样式改变
const startSearch = ref(false)
const startSearchHandler = () => {
  startSearch.value = true
}



const loading = ref(false)
const articleListInfo = ref({})
const search = async () => {
  loading.value = true
  let params = {
    pageNo: articleListInfo.value.pageNo,
    keyword: formData.value.keyword
  }
  let result = await proxy.Request({
    url: api.search,
    params: params,
    showLoading: false
  })
  loading.value = false
  if (!result) {
    return
  }
  articleListInfo.value = result.data
  let list = result.data.list
  list.forEach(element => {
    element.title = element.title.replace(
      params.keyword, "<span style='color: red'>" + params.keyword + "</span>"
    )
  });
}

const changeInput = () => {
  if (formData.value.keyword == '') {
    articleListInfo.value = {}
  }
}

// 结束搜索 搜索框样式改变
const endSearchHandler = () => {
  if (formData.value.keyword == '') {
    startSearch.value = false
  }
  // 清除警告
  formDataRef.value.resetFileds()
}



const showComment = ref(false)

// 监听系统设置
watch(() => store.state.sysSetting, (newVal, oldVal) => {
  if (newVal) {
    showComment.value = newVal.commentOpen
  }
}, { immediate: true, deep: true });
</script>

<style lang="scss">
.search-body {
  background: #fff;
  padding: 10px;
  min-height: calc(100vh - 225px);

  .search-panel {
    display: flex;
    justify-content: center;

    .el-input {
      width: 700px;
    }
  }
}
</style>
